<template>
	<view class="content">
		<!-- <u-navbar title="绑定手机号" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff"
			:background="{backgroundColor:'#000'}"></u-navbar>
		<view v-if="process==1">
			<view class="field">
				<u-field v-model="phone" label="+86" placeholder="请填写手机号" :border-bottom="false">
				</u-field>
				<u-field v-model="code" label="验证码" placeholder="请填写验证码" :border-bottom="false">
					<view class="pwd" slot="right" @click="getcode">
						发送验证码
					</view>
				</u-field>
			</view>
			<button class="new-btn" @click="next" hover-class="none" v-if="user_id==0">下一步</button>
			<button class="new-btn" @click="submit" hover-class="none" v-else>完成</button>
			<view class="whether_read">
				<label class="radio">
					<radio value="" style="transform:scale(0.7)" :checked="isAgree" @click="isAgree = !isAgree" />
				</label>
				<view style="color: #7c7c7c;font-size: 25rpx;margin-top: 6rpx;">我已阅读
					<text style="color: #D89E5E;" @click="red_xy(2)" data-id="1">《用户协议》</text>
					和<text style="color: #D89E5E;" @click="red_xy(3)" data-id="2">《隐私政策》</text>
				</view>
			</view>
		</view> -->
		<view v-if="process==1 || process==2">
			<view class="profilecontent">
				<u-navbar title="登录" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff"
					:background="{backgroundColor:'#000'}"></u-navbar>
				<view class="uphead flex-col flex-c">
					<image v-if="head!='/disk/headimg/touxiang.png'" :src="head" style="width: 153rpx;height: 153rpx;" @click="picops4click"></image>
					<image v-else src="../../static/logins/touxiang.png" style="width: 153rpx;height: 153rpx;" @click="picops4click"></image>
					<text style="margin-top: 20rpx;">点击添加头像</text>
				</view>
				<view class="infoitem">
					<view class="label">昵称</view>
					<view class="value" :class="nickname?'had':''">
						<input type="text" style="text-align: end;" v-model="nickname" placeholder="请填写昵称" />
					</view>
				</view>
				<view class="infoitem">
					<view class="label">年龄</view>
					<view class="value" style="display: flex;align-items: center;" @click="ageshow = true" :class="age?'had':''">
						<view>{{age?age:'请选择'}}</view>
						<image v-if="!age" src="../../static/jinru.png" style="width: 20rpx;height: 35rpx;margin-left: 20rpx;"></image>
					</view>
				</view>
				<view class="infoitem">
					<view class="label">性别</view>
					<view class="value" style="display: flex;justify-content: flex-end;align-items: center;">
						<view class="genger" @click="sex = 1" :style="sex == 2?'border: 1rpx solid #C2C1C1;color: #C2C1C1;':'background-color: #D89E5E;color: #fff;'">
							<image v-if="sex == 1" src="../../static/logins/nan2.png" style="width: 28rpx;height: 28rpx;"></image>
							<image v-if="sex != 1" src="../../static/logins/nan1.png" style="width: 28rpx;height: 28rpx;"></image>
							<view style="margin-left: 10rpx;" :style="sex == 2?'color: #C2C1C1;':'color: #fff;'">男</view>
						</view>
						<view style="width: 40rpx;"></view>
						<view class="genger" @click="sex = 2" :style="sex == 1?'border: 1rpx solid #C2C1C1;color: #C2C1C1;':'background-color: #D89E5E;color: #fff;'">
							<image v-if="sex == 2" src="../../static/logins/nv2.png" style="width: 28rpx;height: 28rpx;"></image>
							<image v-if="sex != 2" src="../../static/logins/nv1.png" style="width: 28rpx;height: 28rpx;"></image>
							<view style="margin-left: 10rpx;" :style="sex == 1?'color: #C2C1C1;':'color: #fff;'">女</view>
						</view>
					</view>
				</view>
				<button class="new-btn" style="margin-top: 150rpx;" @click="submit">完成</button>
				<view style="display: flex;justify-content: center;width: 100%;color: #C5C3C3;margin-top: 40rpx;">选择性别后无法修改</view>

				<u-picker mode="selector" v-model="ageshow" @confirm="setage" :default-selector="[0]"
					:range="ageselector"></u-picker>
			</view>
		</view>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				yzPhone: '',
				yzCode: '',
				codeText: '发送验证码',
				action: this.$HOSTURL + '/api/Tool/imagesUpload',
				formdata:{
					water: 1,
					thumb: 1
				},
				phone: '',
				pwd: '',
				code: '',
				process: 1,
				sex: 1,
				yqm: '',
				nickname: '',
				wx: '',
				sg: '',
				tz: '',
				description: '',
				jyyhshow: false,
				jyyh: '',
				jiaoyou: [],
				yuehui: [],
				jyops: [{
					text: '网游',
					checked: false
				}, {
					text: '运动会友',
					checked: false
				}, {
					text: '同城信息',
					checked: false
				}, {
					text: '旅行休闲',
					checked: false
				}, {
					text: '看电影',
					checked: false
				}, {
					text: '废物回收',
					checked: false
				}, {
					text: '连麦聊天',
					checked: false
				}],
				yhops: [{
					text: '收费约会',
					checked: false
				}, {
					text: '跟钱没关系',
					checked: false
				}, {
					text: '我要帅哥',
					checked: false
				}, {
					text: '夜蒲聚会',
					checked: false
				}, {
					text: '我要好玩',
					checked: false
				}, {
					text: '我需要关爱',
					checked: false
				}, {
					text: '看情况',
					checked: false
				}],
				zhiyeshow: false,
				zhiye: '',
				zhiyeselector: ['在校学生', '计算机/互联网/IT', '电子/半导体/仪器仪表', '通信技术', '销售', '市场拓展', '公关/商务', '人力资源/行政/后勤', '高级管理',
					'生产/加工/制造', '质控/安检', '工程机械', '技工', '财会/审计/统计', '金融/证券/投资/保险', '房地产/装修/物业', '仓储/物流', '普通劳动力/家政服务',
					'普通服务行业', '航空服务业', '教育/培训', '咨询/顾问', '学术/研究', '法律', '设计/创意', '文学/传媒/影视', '餐饮/旅游', '化工', '能源/地质勘查',
					'医疗/护理', '保健/美容', '生物/制药/医疗器械', '体育工作者', '翻译', '公务员/国家干部', '农/林/牧/渔业', '警察', '自由职业者', '其他'
				],
				xzops: ['水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'],
				sgshow: false,
				tzshow: false,
				ageshow: false,
				xzshow: false,
				age: '',
				xz: '',
				shejiaoshow: false,
				head: '/disk/headimg/touxiang.png',
				wxpath: '',
				isAgree: false,
				user_id:0,
				platform:''
			}
		},
		onLoad(options) {
			if(options.process){
				this.process = options.process
			}
			if(options.phone){
				this.phone = options.phone
			}
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.platform = res.platform  // 14.3
					if(res.platform=='devtools'){
						this.process=2
					}
				}
			})
			
		},
		methods: {
			red_xy(i){
				if(i==3){
					uni.navigateTo({
						url: '/pages/webview/index?url=https://app.myanmo.cn/xqyinsi.html'
					})
				}else{
					uni.navigateTo({
						url: '/pages/webview/index?id='+i
					})
				}
			},
			async submit() {
				var that = this;
				if (!that.head) {
					// this.$u.toast('请上传头像');
					// return;
				}
				if (!that.nickname) {
					that.$u.toast('昵称还没未填写');
					return;
				}
			
				if (!that.age) {
					that.$u.toast('请选择年龄');
					return;
				}
				if(that.user_id == 0){
					var data = {
						phone: that.phone,
						name: that.nickname,
						age: that.age,
						sex: that.sex==1?'男':'女',
						head: that.head,
						// qq_openID: $api.getStorage('qq_openID'),
						city:uni.getStorageSync('dyCity'),
						share_id: uni.getStorageSync('share_id'),
						// device_id: uni.deviceId(),
						longitude: that.$store.state.longitude,
						latitude: that.$store.state.latitude,
					}
					if(uni.getStorageSync('openid')){
						data.openid=uni.getStorageSync('openid');
					}else{
						if(uni.getStorageSync('ios_openid')){
							data.ios_openid=uni.getStorageSync('ios_openid');
						}else{
							data.app_openid=uni.getStorageSync('openid');
						}
					}
					if(that.head!='/disk/headimg/touxiang.png'){
						that.$Upimg({
							image: that.head,
							water: 0
						}, async (u) => {
							data.head = u;
							const {data:result} = await that.$Request({
								url: 'api/reg/index',
								data: data,
								method: 'POST'
							})
							if (result.code == '200') {
								that.$u.toast('提交成功')
								that.$store.state.userinfo = result.data
								//that.$store.state.sex = res.data.sex
								that.$store.state.isVip = result.data.is_vip
								that.$store.state.hasLogin = true
								that.$store.state.userid = result.id
								that.$store.state.sex = data.sex
								uni.setStorageSync('uid', result.id);
								uni.setStorageSync('sex', data.sex);
								that.$store.dispatch('setOnline',1)
								uni.switchTab({
									url:'/pages/index/index?new=1'
								})
							} else {
								that.$u.toast(result.msg);
							}
						})
					}else{
						const {data:result} = await that.$Request({
							url: 'api/reg/index',
							data: data,
							method: 'POST'
						})
						if (result.code == '200') {
							that.$u.toast('提交成功')
							that.$store.state.userinfo = result.data
							//that.$store.state.sex = res.data.sex
							that.$store.state.isVip = result.data.is_vip
							that.$store.state.hasLogin = true
							that.$store.state.userid = result.id
							that.$store.state.sex = data.sex
							uni.setStorageSync('uid', result.id);
							uni.setStorageSync('sex', data.sex);
							that.$store.dispatch('setOnline',1)	
							uni.switchTab({
								url:'/pages/index/index?new=1'
							})
						} else {
							that.$u.toast(result.msg);
						}
					}
				}else{
					var data = {
						phone: that.phone,
						user_id: that.user_id
					}
					if(uni.getStorageSync('openid')){
						data.openid=uni.getStorageSync('openid');
					}else{
						if(uni.getStorageSync('ios_openid')){
							data.ios_openid=uni.getStorageSync('ios_openid');
						}else{
							data.app_openid=uni.getStorageSync('openid');
						}
					}
					const {data:result} = await that.$Request({
						url: 'api/user/editInfo',
						data: data,
						method: 'POST'
					})
					if (result.code == '200') {
						that.$u.toast(result.msg)
						that.$store.state.userinfo = result.data
						//that.$store.state.sex = res.data.sex
						that.$store.state.isVip = result.data.is_vip
						that.$store.state.hasLogin = true
						that.$store.state.userid = result.id
						that.$store.state.sex = data.sex
						uni.setStorageSync('uid', result.id);
						uni.setStorageSync('sex', data.sex);
						that.$store.dispatch('setOnline',1)
						uni.switchTab({
							url:'/pages/index/index?new=1'
						})
					} else {
						that.$u.toast(result.msg);
					}
				}
			},
			wxqrcodeUploaded(data, index, lists, name){
				this.wxpath = data.data.image
			},
			next() {
				var _this = this
				if (this.process == 1) {
					if (!this.code || this.code != this.yzCode || this.phone != this.yzPhone) {
						return this.$u.toast('验证码不正确');
					}
					if(!this.isAgree){
						return uni.showToast({
							title: '请勾选协议',
							icon: 'none'
						})
					}
				} else if (this.process == 2) {
					if (this.sex == 0) {
						return uni.showToast({
							title: '请选择性别',
							icon: 'none'
						})
					}
					return uni.showModal({
						title: '提示',
						content: '注册后将不能修改性别，确定吗？提示：你并不能与相同性别的用户交流',
						success: function(res) {
							if (res.confirm) {
								_this.process++
							}
						}
					});
				}
				this.process++
			},
			setage(res) {
				this.age = this.ageselector[res[0]]
			},
			setxz(res) {
				this.xz = this.xzops[res[0]]
			},
			setsg(res) {
				this.sg = this.sgselector[res[0]]
			},
			settz(res) {
				this.tz = this.tzselector[res[0]]
			},
			setzhiye(res) {
				this.zhiye = this.zhiyeselector[res[0]]
			},
			showjyyh(text) {
				this.jyyhshow = true,
					this.jyyh = text
			},
			chooseitem(e) {
				switch (this.jyyh) {
					case 'jiaoyou':
						this.jyops[e.currentTarget.dataset.index].checked = !this.jyops[e.currentTarget.dataset.index]
							.checked
						break;
					case 'yuehui':
						this.yhops[e.currentTarget.dataset.index].checked = !this.yhops[e.currentTarget.dataset.index]
							.checked
						break;
				}
			},
			canceljyyh() {
				this.jyyhshow = false,
					this.jyyh = ''
			},
			comfirmjyyh() {
				switch (this.jyyh) {
					case 'jiaoyou':
						var jiaoyou = []
						this.jyops.forEach(item => {
							if (item.checked) {
								jiaoyou.push(item.text)
							}
						})
						this.jiaoyou = jiaoyou
						break;
					case 'yuehui':
						var yuehui = []
						this.yhops.forEach(item => {
							if (item.checked) {
								yuehui.push(item.text)
							}
						})
						this.yuehui = yuehui
						break;
				}
				this.canceljyyh()
			},
			picops4click(index) {
				var xiangce = 0;
				var xiangji = 0;
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE'; // 要检查的权限
				const android_camera = 'android.permission.CAMERA';
				plus.android.checkPermission(
				  permission,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相册未授权');
					  xiangce = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				plus.android.checkPermission(
				  android_camera,
				  granted => {
					  console.log(granted);
					if (granted.checkResult == '-1') {
					  console.log('相机未授权');
					  xiangji = 1;
					}
				  },
				  error => {
					console.error('Error checking permission:', error.message);
				  }
				);
				
				setTimeout(function(){
					console.log(xiangce);
					console.log(xiangji);
					if(xiangce == 1 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 1 && xiangji == 0){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}else if(xiangce == 0 && xiangji == 1){
						uni.showModal({
							title: '提示',
							content: '开心小圈对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、举报用户、保存相册、发布动态、下载与客服沟通等场景中读取和写入相册和文件内容。',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							},
						})
					}
				},100)
				var _this = this
				uni.chooseImage({
					count: 1,
					// sourceType:['album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						_this.head = tempFilePaths[0]
					}
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			async getcode() {
				var that = this;
				if (that.bind) return that.sendcode()
				var datas = {
					phone: that.phone
				};
				console.log(uni.getStorageSync('openid'))
				if(uni.getStorageSync('openid')){
					datas.type='wechat';
				}else{
					if(uni.getStorageSync('ios_openid')){
						datas.type='ios';
					}else{
						datas.type='app';
					}
				}
				console.log(datas);
				const {
					data: res
				} = await that.$Request({
					url: 'apis/home/user/sel',
					data: datas
				})
				if (res.code != 200) {
					console.log(res.msg);
					that.$u.toast(res.msg || '该手机号已被注册');
				} else {
					console.log(res.msg);
					if(res.data){
						that.user_id = res.data.id
						that.head = res.data.head_portrait
						that.nickname = res.data.name
						that.age = res.data.age
					}
					that.sendcode()
				}
			},
			async sendcode() {
				if (this.$refs.uCode.canGetCode) {
					var code = Math.floor(Math.random() * (999999 - 100000 + 1) + 100000);
					console.log(code);
					const {
						data: res
					} = await this.$Request({
						url: 'api/code/sms',
						data: {
							phone: this.phone,
							code: code
						}
					})

					this.$u.toast(res.msg);
					if (res && res.code == 200) {
						this.yzPhone = this.phone;
						this.yzCode = code;
						this.$refs.uCode.start();
					}
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		},
		computed: {
			jiaoyoumap() {
				return this.jiaoyou.join(',')
			},
			yuehuimap() {
				return this.yuehui.join(',')
			},
			ageselector() {
				var arr = new Array();
				for (var i = 18; i < 101; i++) {
					arr.push(i);
				}
				return arr
			},
			sgselector() {
				var arr = new Array();
				for (var i = 140; i < 201; i++) {
					arr.push(i);
				}
				return arr
			},
			tzselector() {
				var arr = new Array();
				for (var i = 40; i < 100; i++) {
					arr.push(i);
				}
				return arr
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		overflow: auto;
		background-color: #000;

		.field {
			margin: 60rpx 30rpx;

			.pwd {
				color: #A87B38;
			}

			/deep/.u-field {
				padding: 14px 20px;
				display: flex;
				align-items: center;
				position: relative;
				border-radius: 60px;
				margin-bottom: 30rpx;
				background: rgba(153, 149, 149, 0.466);

				.u-label-text {
					color: #A87B38;
				}

				input {
					color: #eee;
				}
			}
		}

		.tips {
			text-align: center;
			padding: 30rpx;
			font-size: 24rpx;
			color: #fff;

			text {
				color: #fff;
			}
		}

		.sex {
			padding: 20rpx 0;
			display: flex;
			justify-content: space-around;

			view {
				width: 40%;
				height: 60vw;
				border-radius: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.next-btn {
			color: #fff;
			background: transparent;
			border: 1rpx solid #ccc;
		}

		.profilecontent {
			.uphead {
				padding: 20rpx 0;

				text {
					color: #ccc;
					margin: 16rpx 0;
					font-size: 22rpx;
				}
			}

			.tab {
				margin-top: 20rpx;
				padding: 20rpx 30rpx 10rpx 30rpx;
				color: #ccc;
			}

			.infoitem {
				background: #000;
				display: flex;
				width: 90%;
				margin: 20rpx auto;
				padding: 20rpx 30rpx;
				border-bottom: 1rpx solid #414141;

				&.teli {
					.label {
						flex: 1;
					}

					.value {
						width: auto;
					}
				}

				.label {
					width: 22%;
					font-weight: bold;
					color: #fff;
				}

				.value {
					width: 78%;
					color: #C2C1C1;
					display: flex;
					justify-content: flex-end;
					&.had {
						color: #fff;
					}
				}
			}

			.select {
				width: 100%;
				height: 400rpx;
				padding: 0 20rpx;

				.top {
					color: #673AB7;
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
				}

				.selects {
					padding: 30rpx 0;
					display: flex;
					flex-wrap: wrap;

					.item {
						padding: 10rpx 0;
						width: 30%;
						text-align: center;
						border-radius: 10rpx;
						margin-right: 20rpx;
						margin-bottom: 14rpx;
						border: 2rpx solid #eee;

						&.checked {
							background-color: #673AB7;
							color: #fff;
						}
					}
				}
			}
		}
	}
	.genger{
		width: 136rpx;
		height: 56rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.whether_read {
		display: flex;
		flex-direction: row;
		justify-content: center;
		text-align: center;
		align-items: center;
		margin-top: 40rpx;
	}
</style>
